import { ElButton } from 'element-plus';
import { PropType } from 'vue';
import './index.scss';

// export type TMciButtonType = '' | 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger' | 'text';
export type TMciButtonType = '' | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';

export const MciButton = defineComponent({
  name: 'MciButton',
  props: {
    type: {
      // 为了vscode提示. just do it !!
      type: String as PropType<TMciButtonType>,
      default: 'default'
    },
    text: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    link: {
      type: Boolean,
      default: false
    },
    plain: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'default'
    }
  },
  render() {
    const { $slots, type, disabled, text, icon, plain, size } = this;
    const defaultSlot = () => {
      const value = $slots.default ? $slots.default?.() : text;

      if (icon)
        return (
          <>
            <i class={`${icon} mr-2 text-14`}></i>
            {value}
          </>
        );
      return value;
    };

    // const className = `mci-button ${this.link ? 'is-link' : ''}`;
    const className = `mci-button`;

    const slots: any = {
      ...$slots,
      default: defaultSlot
    };
    return (
      <ElButton
        loading={this.loading}
        type={type}
        link={this.link}
        disabled={disabled}
        plain={plain}
        size={size}
        circle={this.circle}
        class={className}
        vSlots={slots}
      />
    );
  }
});
